<template>
  <div class="app-container jklis">
    <div class="zdy-main">
      <div class="tip" @click="openUrl('https://game.ikbh.top/video/%E8%B4%A2%E5%8A%A1%E6%8A%A5%E8%A1%A8.mp4')">不会操作？查看视频教程</div>
      <el-tabs type="border-card" v-model="actived" @tab-click="tabChange" v-loading="loading">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="68px"
          @keyup.enter.native="search">
          <el-form-item label="收支类型" prop="iotype">
            <el-select v-model="queryParams.iotype" placeholder="请选择类型" size="small" clearable @change="search">
              <el-option v-for="(dict, i) in iotypeOptions" :key="i" :label="dict.name" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="账单类型" prop="billType">
            <el-select v-model="queryParams.billType" placeholder="请选择类型" size="small" clearable @change="billtypeChange">
              <el-option v-for="dict in billTypeList" :key="dict.id" :label="dict.rname" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="填报人" prop="registeruser">
            <el-input v-model="queryParams.registeruser" placeholder="请输入关键字" clearable size="small" />
          </el-form-item>
          <el-form-item label="关键字" prop="remark">
            <el-input v-model="queryParams.remark" placeholder="请输入关键字" clearable size="small" />
          </el-form-item>
          <el-form-item label="日期" prop="remark">
            <el-date-picker v-model="timer" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="search">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="search" class="zdy-btn">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" type="primary" size="mini" plain @click="resetQuery"
              class="zdy-btn zdy-btn-refresh">重置</el-button>
          </el-form-item>
          <el-form-item v-show="actived == 2">
            <el-button icon="el-icon-plus" type="primary" size="mini" @click="addACount"
              class="zdy-btn zdy-btn-refresh">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" icon="el-icon-download" type="primary" @click="importExl">导出</el-button>
          </el-form-item>
          <el-form-item v-show="actived == 2">
            <el-button icon="el-icon-document-copy" type="primary" size="mini" @click="makeLink" plain
              class="zdy-btn zdy-btn-refresh">填报链接</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-document-copy" type="primary" size="mini" class="zdy-btn zdy-btn-refresh"
              @click="opentypeConfig">账单类型</el-button>
          </el-form-item>
        </el-form>
        <el-tab-pane :label="tab.name" :name="tab.value" v-for="tab in statusList" :key="tab.value">
          <div style="height:calc(100vh - 360px)">
            <el-table v-if="tableData.records && tableData.records.length" :data="tableData.records"
              @cell-dblclick="handleUpdate" @sort-change="sortFun" height="calc(100vh - 360px)" style="width: 100%">
              <el-table-column label="序号" width="80" label-position="left">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="填报人" width="110" prop="registeruser" />
              <el-table-column sortable="custom" sort-by label="时间" width="160" prop="createTime" />
              <el-table-column label="收支类型" width="100" prop="iotype">
                <template slot-scope="scope">
                  <span>{{ type[scope.row.iotype] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="账单类型" width="100" prop="billType">
                <template slot-scope="scope">
                  <span>{{ billTypeListMap[scope.row.billType] }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable="custom" sort-by label="金额" width="120" prop="price" />
              <div v-if="typeConfig">
                <el-table-column v-for="(configItem,i) in typeConfig" :key="i" v-if="configItem.isShow" :label="configItem.name" width="120"
                :prop="''+configItem.key" />
              </div>

              
              <!-- <el-table-column v-if="typeConfig && typeConfig[1].isShow" :label="typeConfig[1].name" width="120"
              :prop="''+typeConfig[1].key" />
              <el-table-column v-if="typeConfig && typeConfig[2].isShow" :label="typeConfig[2].name" width="120"
              :prop="''+typeConfig[2].key" />
              <el-table-column v-if="typeConfig && typeConfig[3].isShow" :label="typeConfig[3].name" width="120"
              :prop="''+typeConfig[3].key" />
              <el-table-column v-if="typeConfig && typeConfig[4].isShow" :label="typeConfig[4].name" width="120"
              :prop="''+typeConfig[4].key"/>
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[5].key" />
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[6].key" />
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[5].key" />
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[5].key" />
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[5].key" />
              <el-table-column v-if="typeConfig && typeConfig[5].isShow" :label="typeConfig[5].name" width="120"
              :prop="''+typeConfig[5].key" /> -->

              <el-table-column label="说明" min-width="150" prop="remark" />
              <el-table-column fixed="right" label="状态" width="100">
                <template slot-scope="scope">
                  <el-button type="text" style="color: red" size="mini" v-if="scope.row.status == 2">待支付</el-button>
                  <el-button type="text" style="color: #333" size="mini" v-if="scope.row.status == 1">已支付</el-button>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100" v-if="actived == 2">
                <template slot-scope="scope">
                  <el-button type="text" style="color: red" size="mini" @click="delItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="pages-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
    </div>
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
    <configDialog ref="configDialog"></configDialog>
    <imageDialog ref="imageDialog"></imageDialog>
    <detailDialog ref="detailDialog"></detailDialog>
    <shouhouDialog ref="shouhouDialog"></shouhouDialog>
  </div>
</template>

<script>
import addDialog from "./add.vue";
import detailDialog from "./detail.vue";
import shouhouDialog from "./shouhouEdit.vue";
import configDialog from "./typeConfig.vue";
import imageDialog from "./imageDialog.vue";
import financeApi from "@/api/financeCenter/index.js";
import { getDicts } from "@/api/system/dict/data";
import { getInfo } from '@/api/login'
export default {
  name: "financial",
  dicts: ["financeStatus"],
  components: { addDialog, configDialog, imageDialog, detailDialog,shouhouDialog },
  data() {
    return {
      tableData: {
        records: [],
        total: 0
      },
      timer: [],
      h5link: '',
      upLoadUrl: "",
      loading: false,
      billTypeList: [],
      billTypeListMap: {},
      type: {
        1: "支出",
        2: "收入"
      },
      iotypeOptions: [
        {
          name: "支出",
          value: 1
        },
        {
          name: "收入",
          value: 2
        }
      ],
      statusList: [
        {
          name: "待支付",
          value: "2"
        },
        {
          name: "已支付",
          value: "1"
        }
      ],
      actived: "2",
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        billType: "",
        remark: "",
        sort: "descending",
        sortColumn: "createTime",
        registeruser: ''
      },
      typeConfig: null,
      userInfo: ''
    };
  },
  created() {
    this.upLoadUrl =
      process.env.VUE_APP_BASE_API + "/account/finance/importData";
    this.getList();

    this.getUserInfo()
  },
  activated() {
    this.getList();
  },
  methods: {
    openUrl(url){
      window.open(url)
      },
    // 获取列表
    getList() {
      this.queryParams.status = this.actived;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.startTime = this.timer[0] +' 00:00:00'
        this.queryParams.endTime = this.timer[1] + ' 23:59:59'
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      this.tableData.records = [];
      this.loading = true;
      this.$nextTick(() => {
        financeApi
          .getFinanceList(this.queryParams)
          .then(response => {
            this.$nextTick(() => {
              this.loading = false;
              this.tableData.records = JSON.parse(JSON.stringify(response.rows));
              this.tableData.total = response.total;
            });
          })
          .catch(err => {
            this.loading = false;
          });
      });

    },
    // 获取账单类型列表
    getTypeList() {
      financeApi.getBillType().then(res => {
        this.billTypeList = res.rows;
        // 如果不是管理员，则拼接系统自带账单类型
        let arr = [
          {
            "id": 8,
            "createId": 1,
            "updateId": 1,
            "iotype": "2",
            "rname": "自售",
            "filids": "[{\"key\":\"field1\",\"name\":\"账号\",\"id\":1,\"isShow\":true,\"isMust\":false},{\"key\":\"field2\",\"name\":\"利润\",\"id\":2,\"isShow\":true,\"isMust\":false},{\"key\":\"field3\",\"name\":\"渠道\",\"id\":3,\"isShow\":true,\"isMust\":false},{\"key\":\"field4\",\"name\":\"商品编号\",\"id\":4,\"isShow\":true,\"isMust\":false},{\"key\":\"field5\",\"name\":\"游戏类型\",\"id\":5,\"isShow\":true,\"isMust\":false},{\"key\":\"field6\",\"name\":\"成本价\",\"id\":6,\"isShow\":true,\"isMust\":false}]"
          },
          {
            "id": 9,
            "createId": 1,
            "updateId": 1,
            "iotype": "2",
            "rname": "平台销售",
            "filids": "[{\"key\":\"field1\",\"name\":\"账号\",\"id\":1,\"isShow\":true,\"isMust\":false},{\"key\":\"field2\",\"name\":\"利润\",\"id\":2,\"isShow\":true,\"isMust\":false},{\"key\":\"field3\",\"name\":\"自编号\",\"id\":3,\"isShow\":true,\"isMust\":false},{\"key\":\"field4\",\"name\":\"商品编号\",\"id\":4,\"isShow\":true,\"isMust\":false},{\"key\":\"field5\",\"name\":\"游戏类型\",\"id\":5,\"isShow\":true,\"isMust\":false},{\"key\":\"field6\",\"name\":\"成本价\",\"id\":6,\"isShow\":true,\"isMust\":false}]"
          },
          {
            "id": 11,
            "createId": 1,
            "updateId": null,
            "iotype": "2",
            "rname": "转售",
            "filids": "[{\"key\":\"field1\",\"name\":\"账号\",\"id\":1,\"isShow\":true,\"isMust\":false},{\"key\":\"field2\",\"name\":\"利润\",\"id\":2,\"isShow\":true,\"isMust\":false},{\"key\":\"field3\",\"name\":\"供货商\",\"id\":3,\"isShow\":true,\"isMust\":false},{\"key\":\"field4\",\"name\":\"商品编号\",\"id\":4,\"isShow\":true,\"isMust\":false},{\"key\":\"field5\",\"name\":\"游戏类型\",\"id\":5,\"isShow\":true,\"isMust\":false},{\"key\":\"field6\",\"name\":\"供货金额\",\"id\":6,\"isShow\":true,\"isMust\":false}]"
          },
          {
            "id": 12,
            "createId": 1,
            "iotype": "1",
            "rname": "提号支出",
            "filids": "[{\"key\":\"field1\",\"name\":\"账号\",\"id\":1,\"isShow\":true,\"isMust\":false},{\"key\":\"field2\",\"name\":\"利润\",\"id\":2,\"isShow\":true,\"isMust\":false},{\"key\":\"field3\",\"name\":\"供货商\",\"id\":3,\"isShow\":true,\"isMust\":false},{\"key\":\"field4\",\"name\":\"商品编号\",\"id\":4,\"isShow\":true,\"isMust\":false},{\"key\":\"field5\",\"name\":\"游戏类型\",\"id\":5,\"isShow\":true,\"isMust\":false},{\"key\":\"field6\",\"name\":\"销售金额\",\"id\":6,\"isShow\":true,\"isMust\":false}]"
          },
          {
            "id": 13,
            "createId": 1,
            "updateId": null,
            "iotype": "1",
            "rname": "回收账单",
            "filids": "[{\"key\":\"field1\",\"name\":\"账号\",\"id\":1,\"isShow\":true,\"isMust\":false},{\"key\":\"field2\",\"name\":\"收款账户\",\"id\":2,\"isShow\":true,\"isMust\":false},{\"key\":\"field3\",\"name\":\"号款\",\"id\":3,\"isShow\":true,\"isMust\":false},{\"key\":\"field4\",\"name\":\"商品编号\",\"id\":4,\"isShow\":true,\"isMust\":false},{\"key\":\"field5\",\"name\":\"包赔费\",\"id\":5,\"isShow\":true,\"isMust\":false},{\"key\":\"field6\",\"name\":\"自定义字段6\",\"id\":6,\"isShow\":false,\"isMust\":false}]"
          }
        ]
        if (this.userInfo.roles.indexOf('admin') == -1) {
          this.billTypeList = [...arr, ...this.billTypeList]
        }

        if (this.billTypeList && this.billTypeList.length) {
          this.billTypeList.forEach(t => {
            // this.billTypeListMap[t.id] = t.rname;
            this.$set(this.billTypeListMap, t.id, t.rname)
          });
        }
      });
    },
    //账单类型改变
    billtypeChange(e) {
      console.log("%c Line:195 🥃 e", "color:#ea7e5c", e);
      this.search()
      if (!e) {
        this.typeConfig = null
        return
      }
      // 获取账单自定义字段配置
      let arr = this.billTypeList.filter((item => {
        return item.id == e
      }))
      if (arr && arr.length) {
        this.typeConfig = JSON.parse(arr[0].filids)
        console.log("%c Line:202 🥥 this.typeConfig", "color:#fca650", this.typeConfig);
      }
    },
    // 预览图片
    viewImage(imgs) {
      let arr = JSON.parse(imgs);
      let imgList = arr.map(t => t.url);
      this.$refs.imageDialog.open(imgList);
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.getList();
    },
    // 填报链接
    makeLink() {
      let that = this
      this.$copyText(this.h5link).then(
        function (e) {
          that.$message({
            type: 'success',
            message: '已复制，请发送给填表人'
          })
        },
        function (e) { }
      );
    },
    getUserInfo() {
      getInfo().then(res => {
        console.log("%c Line:270 🥔 userInfores", "color:#33a5ff", res);
        this.userInfo = res
        this.getHost(res.user.userId)
        this.getTypeList();
      })
    },
    // 获取h5填报链接host
    getHost(userId) {
      getDicts("finance_h5_host").then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.h5link = res.data[0].dictValue + '/#/pages/commitFinace/index?userId=' + userId

          }
        }
      });
    },
    // 导出
    importExl() {
      if(!this.queryParams.billType){
        this.$alert("请先选择账单类型");
        return
      }
      this.loading = true
      if (this.timer && this.timer.length == 2) {
        this.queryParams.startTime = this.timer[0] +' 00:00:00'
        this.queryParams.endTime = this.timer[1] + ' 23:59:59'
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      this.queryParams.status = this.actived;
      financeApi.exportList(this.queryParams).then(res => {
        this.$download.name(res.msg);
        this.loading = false
      })
    },
    // handleChange
    handleChange(file, fileList) {
      console.log(
        "%c 🍖 file: ",
        "font-size:20px;background-color: #FCA650;color:#fff;",
        file
      );
    },
    // before
    before(file) {
      console.log(
        "%c 🍲 file: ",
        "font-size:20px;background-color: #93C0A4;color:#fff;",
        file
      );
    },
    // 打开配置弹窗
    opentypeConfig() {
      this.$refs.configDialog.open();
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        billType: "",
        remark: "",
        sort: "descending",
        sortColumn: "createTime",
        startTime: '',
        endTime: ''
      }
      this.queryParams.status = this.actived
      this.timer = []
      this.getList();
    },
    // 表格排序
    sortFun(val) {
      console.log(
        "%c 🍎 val: ",
        "font-size:20px;background-color: #33A5FF;color:#fff;",
        val
      );
      this.queryParams.sort = val.order;
      this.queryParams.sortColumn = val.prop;
      this.getList();
    },
    // tabs切换时触发
    tabChange() {
      this.queryParams.status = this.actived;
      this.search();
    },
    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 双击编辑
    handleUpdate(row) {
      // 查看详情
      if(row.billType==16){
        // 售后账单
        this.$refs.shouhouDialog.open(row,this.billTypeList);
      }else {
        this.$refs.detailDialog.open(row,this.billTypeList);
      }
      
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          financeApi.delFinance(row.id).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getList()
          });
        })
        .catch(() => { });
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped></style>
